<template>
    <div>
        <!--表格-->
        <Table border :columns="columns" :data="tableData"></Table>
        <!--删除弹窗-->
        <Modal v-model="modal" width="360">
            <p slot="header" style="color:#f60;">
                <Icon type="md-information-circle" />
                <span>删除提示</span>
            </p>
            <div style="text-align:center;">
                <p style="font-size:18px;">是否删除数据?</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" @click="remove">删除</Button>
                <Button type="info" size="large" @click="noRemove">取消</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

import ajax from '../../../../libs/axios.js'
export default {
    props: {
        tableData: Array
    },
    data () {
        return {
            modal:false,     // 是否显示弹窗
            index:'',        // 表格数据索引
            id:'',           // 表格数据id
            columns: [
                {
                    title: '序号',
                    type: 'index',
                    width: 80,
                    align: 'center'
                },
                {
                    title: '父级标题',
                    align: 'center',
                    key: 'parentTitle'
                },
                {
                    title: '功能名称',
                    align: 'center',
                    key: 'functionname'
                },
                {
                    title: '功能标题',
                    align: 'center',
                    key: 'functiontitle'
                },
                {
                    title: '跳转路径',
                    align: 'center',
                    key: 'functionpath'
                },
                {
                    title: '数据类型',
                    align: 'center',
                    key: 'functiontype',
                    render: (h, params) => {
                        if (params.row.functiontype === 1) {
                            return h('span', '菜单')
                        } else {
                            return h('span', '按钮')
                        }
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 190,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.editData(params.row.id)
                                        }
                                    }
                                },
                                '编辑'
                            ),
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.goRemove(params.index, params.row.id)
                                        }
                                    }
                                },
                                '删除'
                            )
                        ])
                    }
                }
            ],
        }
    },
    activated () {
        this.init()
    },
    methods: {
        // 初始化数据
        init () {},
        // 编辑按钮
        editData (id) {
            let argu = {
                id: id
            }
            this.$router.push({
                name: 'editfunction',
                params: argu
            })
        },
        // 删除按钮
        goRemove (index, id) {
            this.modal = true
            this.id = id
            this.index = index
        },
        // 确定删除
        remove (index, id) {
            let that = this;
            let url = 'adminlogin/function/deleteCjFunction'
            let data = {
                id: that.id
            }
            ajax.formRes(url, data).then(res => {
                if (res.data > 0) {
                    that.tableData.splice(this.index, 1)
                    that.modal = false
                }
            }).catch(res => {
                console.log('有错误信息')
            })
        },
        // 取消删除
        noRemove () {
            this.modal = false
        }
    },
}
</script>
